<template>
    <view class="content">
        <van-nav-bar :title="navBarTitle" left-arrow @click-left="onClickLeft" id="navBar"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"
            @scrolltolower="loadMore" show-scrollbar="false" id="scroller">

            <!-- <view :style="{height:navBarHeight + 'px'}"></view> -->
            <!-- :style="{'padding-top': wrapperStyle + 'px'}" -->
            <view class="wrapper">
                <!-- <view class="wrapper_content"> -->
                <!-- <view class="orderTabs"> -->
                <van-tabs :swipeable="true" :sticky="true" :active="activeTab" @click="changeTab" animated
                    line-width="20px" color="#FF6203" :ellipsis="false" title-inactive-color="#737373"
                    title-active-color="#333333" isFixed="true" :swipe-threshold="4" :offset-top="offsetTop"
                    :scroll-top="scrollTop" z-index="4">
                    <van-tab v-for="(tab, index) in tabList" :title="tab.typeName" :key="index">
                        <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
                        <view v-show="!loadingIsShow">
                            <view class="orderList_box" v-if="orderList.length > 0">
                                <template>
                                    <view class="orderList" v-for="(item, val) in orderList" :key="val"
                                        :id="item.reservationId">

                                        <view class="goodsDetail">
                                            <!-- <template v-if="item.goodsList.length === 1"> -->
                                            <!-- v-for="(goods, goodsIndex) in item.goodsList"
                                                :key="goodsIndex" :id="goods.goodsId"  mode="widthFix"-->
                                            <view class="wraper_left" @click="toOrderDetail(item)">
                                                <view class="goodsPic">
                                                    <!-- <img class="img" :src="item.image" mode="widthFix" /> -->
                                                    <image :lazy-load="true" :placeholder="defaultIcon" :src="item.image"
                                                        @load="handleImageLoad($event, val, item)"
                                                        :style="{opacity: item.imageLoaded ? 1 : 0}"
                                                        @error="handleImageError($event, val, item)"
                                                        :onerror="defaultIcon" mode="widthFix" />
                                                    <image v-if="!item.imageLoaded" :src="defaultIcon" mode="widthFix" />
                                                </view>
                                                <view class="goodsText">
                                                    <view class="goodsTop">
                                                        <view class="goods_T"
                                                            :class="{'cancel_goods_t':item.serviceStatus == 'canceled' }">
                                                            {{item.newName?item.newName:item.storeName}} <span
                                                                v-if="item.allTimes && item.allTimes >1">({{item.currentTimes}}/{{item.allTimes}})</span>
                                                        </view>
                                                        <view class="serviceStatus"
                                                            v-if="item.serviceStatus == 'canceled'">已取消</view>
                                                    </view>
                                                    <template v-if="item.serviceStatus !== 'wait_order'">
                                                        <view class="goodsMiddle serviceInfoItem"> <van-icon
                                                                name="location-o" size="16"></van-icon> <span>{{
                                                                item.addressDetail }} </span></view>
                                                        <view class="goodsBottom serviceInfoItem"
                                                            v-if="item.serviceStatus == 'canceled'"><van-icon
                                                                name="clock-o" size="16"></van-icon> <span>{{
                                                                item.cancelTime }}</span> </view>
                                                        <view class="goodsBottom serviceInfoItem"
                                                            v-if="item.serviceStatus !== 'canceled'"><van-icon
                                                                name="clock-o" size="16"></van-icon> <span>{{
                                                                item.reservationTime }}</span> </view>
                                                    </template>
                                                    <template v-else>
                                                        <view class="goodsMiddle serviceInfoItem"
                                                            v-if="item.serviceStatus=='wait_order'"> 订单编号：<span>{{
                                                                item.reservationId }} </span></view>
                                                        <view class="goodsBottom serviceInfoItem">有效期至：<span>{{
                                                                item.endDate }}</span> </view>
                                                    </template>

                                                </view>
                                            </view>
                                            <!-- </template>  -->
                                        </view>
                                        <!--                 
                                                <view class="btnArea">
                                                    <view class="btnAreaLeft">
                                                        <view @click="popover(item.orderNum)"></view>
                                                    </view>
                                                    <view class="btnAreaRight" v-if="activeTab === 0">
                                                        <button type="default" plain class="submitBtn" @click="toPreBooked()">立即预约</button>
                                                    </view>
                                                    <view class="btnAreaRight" v-if="activeTab === 1">
                                                        <button type="default" plain class="submitBtn" @click="cancelPreBooked()">取消预约</button>
                                                    </view>
                                                    <view class="btnAreaRight" v-if="activeTab === 2">
                                                        <button type="default" plain class="submitBtn"  @click="toSendJudge()">去评价</button>
                                                    </view>
                                                    <view class="btnAreaRight" v-if="activeTab === 3">
                                                        <button type="default" plain class="submitBtn"  @click="checkJudge()">查看评价</button>
                                                    </view>                                                  
                                                </view> -->
                                    </view>
                                    <view v-if="loading" class="loading-text">正在加载...</view>
                                    <view v-if="finished" class="no-more-text">没有更多了</view>
                                </template>
                            </view>
                            <view class="noOrderwrapper" v-else>
                                <view class="noOrderPic">
                                    <img src=" https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noOrder.png"
                                        alt="">
                                </view>
                                <view class="description">
                                    <view>没有相关服务订单</view>
                                    <view>去下一单吧</view>
                                </view>
                                <view class="btnArea">
                                    <button plain class="checkBtn" @click="lookAroundBtn">去逛逛</button>

                                </view>
                            </view>
                        </view>
                    </van-tab>

                </van-tabs>
                <!-- </view> -->
                <!-- </view> -->
            </view>
            <!-- <view class="noOrderwrapper" v-else>
                <view class="noOrderPic">
                    <img src=" https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noOrder.png"
                        alt="">
                </view>
                <view class="description">
                    <view>没有服务订单</view>
                    <view>去下一单吧</view>
                </view>
                <view class="btnArea">
                    <button plain class="checkBtn" @click="lookAroundBtn">去逛逛</button>

                </view>
            </view> -->
        </scroll-view>
        <van-dialog id="van-dialog" confirm-button-color='#ff6203' />
        <is-shouhuo-popup :show="isShouhuo"></is-shouhuo-popup>
    </view>
</template>
<script>
import loading from '@/mycomponents/loading.vue'

import Dialog from '@/wxcomponents/vant/dialog/dialog'
import isShouhuoPopup from '@/mycomponents/shangcheng/isShouhuoPopup.vue'
import {queryServiceListApi} from '@/api/service'

export default {

    props: {

    },
    components: {
        isShouhuoPopup,
        loading
    },
    data () {
        return {
            defaultIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultIcon.png',

            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
            scrollTop: 0,
            offsetTop:0,
            navBarHeight: 0,
            navBarTitle: '我的服务',
            wrapperStyle:0,
            scrolling: false,
            activeTab: 0,
            sticky: true,
            showMark: false, // 标记
            isShouhuo: false,
            // 热卖商品手写轮播图
            swiperCurrent: 0,
            tabCurrent: 'tabNum1',
            tabList: [
                // {
                //     typeId: 0,
                //     typeName: '全部'
                // },
                {
                    typeId: 1,
                    typeName: '待使用'
                },
                {
                    typeId: 2,
                    typeName: '已预约'
                },
                {
                    typeId: 3,
                    typeName: '待评价'
                },
                {
                    typeId: 4,
                    typeName: '已完成'
                }
            ],
            isOrder: true,
            orderList: [
                // {
                //     orderNum: '343434343313131',
                //     orderStatus: '待收货',
                //     goodsList: [
                //         {
                //             goodsId: 11,
                //             imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             title: '做饭初次体验3小时',
                //             price: '96',
                //             num: '1',
                //             jifen: 190,
                //             money: '156',
                //             specs: '口味一：五斤装'
                //         }
                //     ],
                //     orderEndTime:'2024-10-29 10:00-13:00',
                //     location:'美林山3号楼2单元901',
                //     logistics: '预计明天送达自提点'
                // },
                // {
                //     orderNum: '343434343313132',
                //     orderStatus: '已签收',
                //     goodsList: [
                //         {
                //             goodsId: 12,
                //             imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             title: '做饭初次体验3小时',
                //             price: '96',
                //             num: '1',
                //             jifen: 0,
                //             money: '156',
                //             specs: '口味一：五斤装'
                //         },
                //     ],
                //     location:'美林山3号楼2单元901',
                //     logistics: '快件已被本人签收 地址：滨湖一号运城快递...',
                //     orderEndTime:'2024-10-29 10:00-13:00',
                // },
                // {
                //     orderNum: '343434343313133',
                //     orderStatus: '待付款',
                //     goodsList: [
                //         {
                //             goodsId: 16,
                //             imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             title: '做饭初次体验3小时',
                //             price: '96',
                //             num: '1',
                //             jifen: 190,
                //             money: '156',
                //             specs: '口味一：五斤装'
                //         }
                //     ],
                //     logistics: '20+',
                //     location:'美林山3号楼2单元901',
                //     orderEndTime:'2024-10-29 10:00-13:00',
                // },
                // {
                //     orderNum: '343434343313134',
                //     orderStatus: '待发货',
                //     goodsList: [
                //         {
                //             goodsId: 11,
                //             imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/binggan.png',
                //             title: '做饭初次体验3小时',
                //             price: '96',
                //             num: '1',
                //             jifen: 190,
                //             money: '156',
                //             specs: '口味一：五斤装'
                //         }
                //     ],
                //     location:'美林山3号楼2单元901',
                //     logistics: '预计明天（11月4日）12:00前发货',
                //     orderEndTime:'2024-10-29 10:00-13:00',
                // },
                // {
                //     orderNum: '343434343313136',
                //     orderStatus: '售后',
                //     goodsList: [
                //         {
                //             goodsId: 16,
                //             imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             title: '做饭初次体验3小时',
                //             price: '96',
                //             num: '1',
                //             jifen: 190,
                //             money: '156',
                //             specs: '口味一：五斤装'
                //         }
                //     ],
                //     money: '111',
                //     score: '12',
                //     location:'美林山3号楼2单元901',
                //     logistics: '预计明天（11月4日）12:00前发货',
                //     orderEndTime:'2024-10-29 10:00-13:00',
                // }
            ],
            popoverShow: false,
            current: 0,

            // 待付款  复选框
            checked: [],
            checkAll: false, // 标记是否全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            isShowBlue: false,
            // handlePopup: false,
            popupContent: '这是气泡内容',
          
            list: [],
            menuButtonWidth:'',
            searchRight:'',
            params:{},
            pageBiaoshi:'order',
            showPopover:'true',
            actions : [
                { text: '选项一' },
                { text: '选项二' },
                { text: '选项三' },
            ],
            servieType:'', //wait_order,  // 待预约 ordered,  //  已预约 wait_replay,  // 待评价 replay;  // 已完成
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            finished: false
        }
    },

    computed: {},
    watch: {
        orderList: {
            handler (val) {
                console.log(val)
                if (!this.select) { //
                    var i = 0
                    this.orderList.forEach(item => {
                        if (item.isChecked === true) {
                            i++
                        }
                        if (i === this.orderList.length) { // 不需要过滤 下架或售罄商品
                            this.checkAll = true
                        } else {
                            this.checkAll = false
                        }
                    })
                }
            },
            deep: true
        },

        checked: {
            handler (val) {
                console.log(val, 'newName')

            }
        },
        selectedRowKeys: {
            handler (val) {
                console.log(val, 'selectedRowKeys')
                if (val.length > 0) {
                    this.isShowBlue = true // 标记为正常的按钮  深蓝色
                } else {
                    this.isShowBlue = false // 标记为正常的按钮  浅蓝色
                }
            }
        },
        selectedRows: {
            handler (val) {
                console.log(val, 'selectedRows')
            }
        }
    },
    onLoad (options) { 
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        if (menuButtonInfo) {  // Add null check
            console.log('胶囊按钮宽度：', menuButtonInfo.width);
            console.log('胶囊按钮高度：', menuButtonInfo.height);
            this.menuButtonWidth = menuButtonInfo.width
            this.searchRight = 'padding-right:' + (this.menuButtonWidth + 5) + 'px'
            console.log(this.searchRight)
        }
        this.getNavBarHeight()
        if(options){
            console.log(options,'options',)
            if (getApp().globalData.fromEarnPoints = true && getApp().globalData.taskType == 'comment_service') {
                console.log(options.params,JSON.parse(decodeURIComponent(options.params),'params--赚积分'))
                const params = JSON.parse(decodeURIComponent(options.params))
                this.activeTab = params.activeTab || 0
            } else {
                this.activeTab = Number(options.type) || 0
            }
        }
    },
    onReady () {
        // if (this.orderList.length > 0) {
        //     this.isOrder = true
        //     this.list = this.orderList
        // } else {
        //     this.isOrder = false
        // }
        this.getMyServiceList()
        // this.onRefresherMethod()
    },

    methods: {
        onRefresherMethod() {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }

            // this.getGroupBuyingProductMethod()
            const myServiceList = this.getMyServiceList()
            Promise.all([myServiceList]).then(() => {
                console.log('所有api加载完成')
                this.loadingIsShow = false
                this.loadingIsShowPage = false
                // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                this.time = setTimeout(e => {
                    this.isrefresher = false
                }, 200)
            })
        },
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 10) {
                this.scrolling = true
                this.offsetTop = this.navBarHeight 
            } else  {
                this.scrolling = false
                this.offsetTop = e.detail.scrollTop;
            }
        },
        // 返回键
        onClickLeft () {
            if (getApp().globalData.fromEarnPoints = true && getApp().globalData.taskType == 'comment_service') {
                getApp().globalData.fromEarnPoints = false
                getApp().globalData.taskType = ''
                getApp().globalData.currentTask = ''
            }
            // uni.reLaunch({  url: '/pages/my/mine' })
             // 显示加载动画
             uni.showLoading({
                title: '跳转中...',
                mask: true
            });
            uni.reLaunch({
                url: '/pages/my/mine' ,
                success: () => {
                    // 跳转成功后隐藏加载动画
                    uni.hideLoading();
                },
                fail: (err) => {
                    console.error('跳转失败:', err);
                    uni.hideLoading();
                }
            });
        },
        handleImageError(event, index, item) {
            item.image = this.defaultIcon;
            event.target.src = this.defaultIcon;
            this.$set(item, 'imageLoaded', true);
        },
        handleImageLoad(e, index, item) {
            this.$set(item, 'imageLoaded', true);
        },
        getNavBarHeight() {
            const query = wx.createSelectorQuery();
            query.select('#navBar').boundingClientRect((res) => {
                if (res) {
                    console.log(res,'res')
                    // 计算导航栏高度
                    this.navBarHeight = res.height;
                    this.wrapperStyle = this.navBarHeight + 10
                    this.scrollTop = this.navBarHeight
                    this.offsetTop = this.navBarHeight;
                    console.log(this.navBarHeight,'navBarHeight')
                }
            }).exec();
        },

        // 继续逛逛
        lookAroundBtn () {
            const params = {}
            params.biaoshi = 'order'
            wx.switchTab({ url: '/pages/find/index' })
        },

        // 热卖轮播
        lookInfo(index,e,item){
			this.swiperCurrent = index
            // this.tabCurrent = 'tabNum' + index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
            // this.$emit('gradeSelect', index, item)
		},

        changeTab (e) {
            this.activeTab = e.detail.index
            console.log(e, '090909',this.activeTab)
            this.pageNum = 1
            this.orderList = []
            this.finished = false
            this.getMyServiceList()
        },

        // 新增方法：根据当前tab获取类型
        getCurrentTabType() {
            const types = ['wait_order', 'ordered', 'wait_replay', 'replay']
            return types[this.activeTab] || 'wait_order'
        },

        onSelect(){
            console.log('kkkkklllllll')
            showToast(action.text)
        },

        // 跳转商品详情页面
        // 跳转商品详情
        toOrderDetail (item) {
            console.log(item,'toOrderDetail')
            const params = {}
            params.item = item
            // params.id = val
            params.actStatus=this.activeTab
            params.clickType='detail'  //点击详情跳转的
            params.serviceStatus = item.serviceStatus
             params.reservationId = item.reservationId
            if(this.activeTab===0){
                uni.navigateTo({
                    url:
                        '/pages/myService/preBookedService?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
            }else{
                uni.navigateTo({
                    url:
                        '/pages/myService/otherStatusService?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
            }
           
        },

        // //   跳转 物流详情
        // toLogisticsDetail () {
        //     const params = {}
        //     uni.navigateTo({
        //         url:
        //             '/pages/orders/logisticsDetail?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },

        // //去预约
        // toPreBooked(){
        //     const params = {}
        //     params.actStatus=0
        //     uni.navigateTo({
        //         url:
        //             '/pages/myService/preBookedService?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },
        // // 取消预约
        // cancelPreBooked(){
        //     const params = {}
        //     params.actStatus=this.activeTab
        //     // params.reservationId = 
        //     params.clickType='button'  //点击取消预约按钮跳转的
        //     uni.navigateTo({
        //         url: '/pages/myService/otherStatusService?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },
        // // 去评价
        // toSendJudge(){
        //     const params ={}
        //     params.actStatus=this.activeTab
        //     params.clickType='button'  //点击取消预约按钮跳转的
        //     uni.navigateTo({
        //         url: '/pages/userJudges/sendJudge?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },
        // // 查看评价
        // checkJudge(){
        //     const params ={}
        //     params.actStatus=this.activeTab
        //     params.clickType='button'  //点击取消预约按钮跳转的
        //     uni.navigateTo({
        //         url: '/pages/myService/otherStatusService?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },
        // // 修改地址
        // changeAddress (val) {
        //     const params = {}
        //     params.myHouse = true
        //     if (val === 0) {
        //         // 待发货
        //         params.isPay = true
        //         params.isSend = false
        //     } else {
        //         params.isPay = false
        //     }
        //     params.pageBiaoshi=this.pageBiaoshi
        //     uni.navigateTo({
        //         url: '/pages/orders/orderDetails?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },

        // // 售后、退款
        // delOrder () {
        //     Dialog.confirm({
        //         message: '确认删除记录'
        //     }).then(() => {
        //         // on confirm
        //     })
        //         .catch(() => {
        //             // on cancel
        //             console.log('cancel')
        //         })
        // },

        // 以下为待支付
        // 清空已多选项
        clearRowSelection () {
            this.selectedRows = []
            this.selectedRowKeys = []
        },
        // 多选框后的文字的点击事件  +  单选事件、
        // 未点击 管理时要判断disabled    点击之后 不需要判断
        onChange (i, item) {
            // console.log(i, 'i', item)
            item.isChecked = !item.isChecked
            if (item.isChecked === true) {
                this.selectedRowKeys.push(item.orderNum)
                this.selectedRows.push(item)
            } else {
                const index = this.selectedRowKeys.indexOf(item.orderNum)
                console.log(index, 'indesR')
                this.selectedRowKeys.splice(index, 1)
                this.selectedRows.splice(index, 1)
            }
        },
        // 标记  选择框
        handleCheck (item, e) {
            console.log(item, e, '单选----')

            this.checkAll = this.checked.length === this.orderList.length
            item.isChecked = e.detail

            if (item.isChecked === true) {
                this.selectedRowKeys.push(item.orderNum)
                this.selectedRows.push(item)
            } else {
                const index = this.selectedRowKeys.indexOf(item.orderNum)
                console.log(index, 'indesR')
                this.selectedRowKeys.splice(index, 1)
                this.selectedRows.slice(index, 1)
            }
        },


        // 确认收货
        checkShouhuo () {
            this.isShouhuo = true
        },
        // 页面顶部的搜索按钮  跳转搜索页面
        onSearch(){
            uni.navigateTo({
                url:'/pages/orders/searchOrder'
            })
        },

        // 代付款页面  合并付款
        onClickbutton(){},

        // 申请发票
        showTaxInvoice(){
            uni.navigateTo({
                url:'/pages/orders/taxInvoice'
            })
        },
        // 获取订单列表
        getMyServiceList(){
            if (this.loading || this.finished) return;
            this.loading = true;
            return new Promise((resolve, reject) => {
                queryServiceListApi({
                    type:this.getCurrentTabType(), // 新增类型映射方法
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,

                }).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        this.total = res.data.total;
                        // 修改数据合并方式
                        this.orderList = this.pageNum === 1
                            ? res.data.list
                            : [...this.orderList, ...res.data.list];

                        this.finished = this.orderList.length >= this.total;
                        this.pageNum++;
                        console.log(this.orderList, 'this.orderList')
                        this.isOrder = this.orderList.length > 0

                        resolve(res)
                    } else {
                        reject(res)
                    }
                }).finally(() => {
                    this.loading = false;
                    this.loadingIsShow = false;
                    this.time = setTimeout(e => {
                        this.isrefresher = false
                    }, 200)
                })
            })
        },
        // 新增加载更多方法
        loadMore() {
            if (!this.finished) {
                this.getMyServiceList();
            }
        }

    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    height: 100vh;
    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}

.scroll-content {
    flex: 1;
    height: 1px;
}

// 没有订单的样式
.noOrderwrapper {
    padding: 50px 24px;
}

.noOrderPic {
    width: 100%;
    text-align: center;

    img {
        width: 81px;
        height: 85px;
    }
}

.orderTip {
    margin-top: 50px;
    font-weight: bolder;
    font-size: 40rpx;
    text-align: center;
    color: #111111;
}

.description {
    margin-top: 20px;
    text-align: center;
    color: #d4d4d4;
    font-size: 24rpx;
    text-align: center;
}

.btn-area {
    // padding-top: 100px;

    button[plain] {
        border: none;
    }
}

.checkBtn {
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 62rpx;
    line-height: 60rpx;
    width: 193px;

}

.wrapper {
    padding: 10px 0px;
    background-color: #ffffff;

    .cartAd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 24px;
    }

    .cartAd_title {
        // font-size: 20px;
        font-size: 60rpx;
        text-align: left;
        line-height: 60rpx;
        color: #111111;
    }
}

.orderTabs {
    // margin-top: 24px;
}

.orderList_box {
    background-color: #ffffff;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}

.orderList {
    padding: 24rpx 0px 26rpx 0px;
    background-color: #ffffff;
    // width: calc(100% - 96rpx);
    width: 100%;
    border-bottom: 4rpx solid #efefef;

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    // 有复选框  右侧商品的样式
    .orderTopRight {
        width: 100%;
    }

    // 已付款
    .listTop {
        display: flex;
        align-items: center;

        .listTopLeft {
            width: 147rpx;
            img{
                width: 100%;
                height: auto;
            }
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        padding: 0 48rpx;
        margin-top: 20rpx;
        // display: flex;
        // justify-content: space-between;
        width: calc(100% - 96rpx);

        .wraper_left {
            display: flex;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }
        .goodsPic {
            width: 33%;
            border-radius: 8rpx;
            // width: 160rpx;
            // height: 160rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            image {
                // width: 160rpx;
                // height: 160rpx;
                border-radius: 8rpx;
                width: 100%;
                height: auto;
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }
    }
}
.orderList:last-child{
    border-bottom:none;
}

.goodsText {
    width: 67%;
    // width: calc(100% - 188rpx);
    margin-left: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 12rpx;
    padding-bottom: 20rpx;
    text-align: left;

    .goodsTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods_T {
            max-width: 100%;
            font-size: 38rpx;
            text-align: left;
            color: #333;
            // line-height: 38rpx;
            // margin-top: 9px;  //display：flex   中 元素居中
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }
        .cancel_goods_t{
            width:70%;
        }
        .serviceStatus{
            font-weight: 400;
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #ff6203;
        }

    }

    .goodsMiddle {
        margin-top: 26rpx;
        width: 100%;
        font-size: 28rpx;
        text-align: left;
        color: #666666;
        line-height: 28rpx;

        span{
            margin-left: 8rpx;
            color: #666666;
            // white-space: nowrap;
            // /* 防止文本换行 */
            // overflow: hidden;
            // /* 超出部分隐藏 */
            // text-overflow: ellipsis;
            // /* 显示省略号 */
        }
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }

    .goodsBottom {
        margin-top: 25rpx;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 28rpx;
        text-align: left;
        color: #666666;

        span{
            margin-left: 8rpx;
            font-size: 28rpx;
            text-align: left;
            color: #666666;
            line-height: 28rpx;
        }
        .judgeBtn {
            border: 1px solid #FF6203;
            border-radius: 20px;
            font-size: 24rpx;
            text-align: center;
            color: #FF6203;
            line-height: 24rpx;
            padding: 5px 13px;
        }
    }
    .serviceInfoItem {
        font-size: 28rpx;
        color: #666;
        line-height: 28rpx;
    }
}

::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}


.btnArea {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btnAreaLeft {
        color: #888888;
        font-size: 22rpx;
        line-height: 22rpx;
    }

    .btnAreaRight {
        display: flex;
        justify-content: space-between;

        // 灰字灰框按钮
        .grayBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #D4D4D4;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 12px;
        }

        // 黑字灰框按钮
        .blackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #111111;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
        }

        // 黑字黑框按钮
        .blackBlackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #111111;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #111111;
            padding-left: 10px;
            padding-right: 10px;
        }
        // 红字红框
        .submitBtn {
            background-color: #FF6203;
            // border: 1px solid #FF6203;
            border-radius: 50rpx;
            font-size: 28rpx;
            text-align: center;
            color: #FFFFFF;
            height: 60rpx;
            line-height: 60rpx;
            // padding-left: 34rpx;
            // padding-right: 34rpx;
            width: 180rpx;

        }

        button{
            border: none;
        }

    }
}

// 有订单时  页面顶部的tabs
#navBar{
    // position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 确保 NavBar 在最上层 */
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

// 文字不用...
::v-deep .van-ellipsis {
    text-overflow: initial !important;
    overflow: auto;
    flex: auto;

}

::v-deep .van-tab {
    z-index: 999;
    font-size: 30rpx !important;
}

::v-deep .van-tab--active {
    font-size: 32rpx !important;
    font-weight: bolder !important;
}

::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
}


.r12 {
    margin-right: 12px;
}

.pb {
    padding-bottom: 50px;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
</style>
